<template>
  <div class="discount-search">
    <van-sticky :offset-top="1">
      <form action="/">
        <van-search
          v-model="sy_data.search"
          shape="round"
          :autofocus="true"
          show-action
          placeholder="请输入搜索关键词"
          @input="fnInput"
		      @focus="fnScroll"
          background="#ffffff"
        >
        <template #action>
          <div class="search-right">
            <div @click="onSearch" class="aui-padded-r-10">搜索</div>
            <div @click="back">取消</div>
          </div>
        </template>
        </van-search>
      </form>
    </van-sticky>
    <div class="search_history aui-padded-15 aui-bg-f" v-if="!search.is_show && !sy_data.is_show && search.history.length > 0" v-cloak>
        <van-row class="aui-text-3 aui-font-weight aui-ftn15">
            <van-col span="18">
              历史搜索
            </van-col>
            <van-col span="6" class="aui-text-right" @click="fnClearHistory">
              <i class="iconfont icon-lajitong aui-ftn13 aui-text-9"></i>
            </van-col>
        </van-row>
        <div class="aui-padded-t-15">
            <div class="aui-label tag-list aui-margin-b-10 aui-margin-r-5 van-ellipsis" @click="fnSetSearch(item)" v-for="(item, index) in search.history" :key="index" v-text="item"></div>
        </div>
    </div>
    <div v-if="!search.is_show && sy_data.is_show" v-cloak>
        <div v-if="sy_data.isTotal && sy_data.items.length == 0 && sy_data.page == 1" v-cloak>
            <div class="no-data aui-text-center aui-text-9">
                <i class="iconfont icon-lujing1161"></i>
                <div class="aui-ftn16">
                    空空如也~
                </div>
            </div>
        </div>
        <section class="discount-section" v-if="!search.is_show && sy_data.is_show " v-cloak>
          <van-pull-refresh v-model="sy_data.refreshing" @refresh="fnLoadMore" >
            <div v-for="(item, index) in sy_data.items" :key="index">
                <List :item="item" :cid="cid"></List>
            </div>
            <div @click="fnGetSearchData()" class="aui-ftn14 aui-text-6 aui-text-center aui-padded-15" v-text="sy_data.text"></div>
          </van-pull-refresh>
        </section>
    </div>
  </div>
</template>

<script>
import "@/styles/discount.css"
import Discount from '@/service/discount.js'
import List from './components/list.vue'
  export default {
    components: {
      List
    },
    data () {
      return {
        cid: '',
        search : {
            list: [],
            is_show: false,
            history: []
        },
        sy_data: {
            isTotal:false,
            loading: false,
            finished: false,
            refreshing: false,
            is_show: false,
            search: '',
            page: 0,
            limit: 10,
            items: [],
            text: '',
            disabled: false
        }
      }
    },
	mounted() {
		this.init()
		window.addEventListener('scroll', this.handleScroll, true)
	},
	beforeDestroy() {
		window.removeEventListener('scroll', this.handleScroll, true)
	},
    methods: {
		handleScroll () {
			this.disabled = this.utils.handleScroll()
		},
		fnScroll () {
			window.scrollTo(0,0)
		},
		init: function() {
      this.cid = this.$route.params.cid;
      this.search.history = this.$store.state.discount_history ? this.$store.state.discount_history : [];
		},
		// 存搜索记录
		fnSaveHistoryData: function(search) {
			var index = this.search.history.indexOf(search);
			if (index == -1) {
				this.search.history.push(search);
				this.$store.commit('ADD_DISCOUNT', this.search.history);
			}
		},
		fnClearHistory: function() {
			this.$dialog.confirm({
			  message: '确认删除全部历史纪录',
			})
      .then(() => {
          this.search.history = []
          this.$store.commit('REMOVE_DISCOUNT', this.search.history);
      })
      .catch(() => {
      // on cancel
      });
		},
		onSearch() {
      this.fnSearchData(this.sy_data.search) 
		},
    fnInput (val) {
      if (!val) {
        this.sy_data.is_show = false;
        this.search.is_show = false;
      }
    },
		// list tag
		fnGetList: function(search) {
		  this.search.is_show = search ? true : false;
		  this.sy_data.is_show = false;
		  this.search.list = [];
		  this.fnSearchData(search)
		},
		// 指定搜索
		fnSetSearch: function(search) {
			this.sy_data.search = search;
			this.fnSearchData(search)
		},
		// 去搜索
		fnSearchData:function(search) {
			this.sy_data = {
				isTotal:false,
				loading: false,
				finished: false,
				refreshing: false,
				is_show: true,
				search: search,
				page: 0,
				limit: 10,
				items: [],
        text: '',
        disabled: false
			}
			this.search.is_show = false;
			this.fnGetSearchData();
		},
		// 获取数据
		fnGetSearchData: function() {
      let { is_show, loading, finished, page, limit, search,items, isTotal,text, disabled, refreshing } = this.sy_data; 
			if (search) {
        if (is_show && !this.search.is_show) {
			  if (!loading && !finished) {
				page++;
        loading = true;
        text="数据加载中..."
				Discount.fnSearchData({ q: search,p: page,n: limit, isLoading: true}).then(res => {
				  // 加载状态结束
            loading = false;
            if (res && Array.isArray(res.content)) {
              this.fnSaveHistoryData(search);
              items = items.concat(res.content)
              text="加载更多数据"
            } else {
              finished = true;
              if (page == 1) {
                  isTotal = true
                  text = ''
              } else {
                  if (items.length > 0) text="没有更多了"
              }
            }
            this.sy_data = { is_show, loading, finished, page, limit, search,items, isTotal,text,disabled,refreshing };
				})
			  }
			}
      }
      
		},
      fnLoadMore() {
        this.fnSearchData(this.sy_data.search)
      }
    }
  }
</script>

<style scoped="">
  section.sy_list div.list {
      position: relative;
      border-radius: 4px;
  }
  section.sy_list div.list div.cont {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
  }
  section.sy_list div.list div.cont div.name {
      padding-bottom: 20px;
  }

  section.sy_list div.list div.cont div.tag {
      padding-bottom: 5px;
  }
  section.sy_list div.list div.cont div.tag,
  section.sy_list div.list div.cont div.other {
      color: #aaa;
  }

  section.sy_list div.list div.rt {
      height: 84px;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-align-items: flex-end;
          -ms-flex-align: end;
              align-items: flex-end;
  }

  section.sy_list div.list div.rt i {
      width: 27px;
      height: 27px;
      line-height: 27px;
      display: inline-block;
      background-color: rgba(247,57,87, .1);
      border-radius: 50%;
  }
  section.sy_list div.list div.rt i.sk {
	  background-color: rgba(247,57,87, 0);
	  opacity: 0;
  }

  section.sy_list div.list div.rt i.no_sk {
	  background-color: rgba(247,57,87, .1);
	  color: var(--pink);
  }

  section.sy_list div.list div.rt button {
      border: 0;
  }

  section.sy_list div.list div.rt button.countdown{
      background-color: #E5E5E5;
  }
  section.sy_list div.list div.rt button.finished {
      background-color: #A9A9A9;
  }
  section.sy_list div.list div.rt button.sy {
      background-color: var(--pink);
  }
  div.tag-list {
      background-color: #f5f5f5;
      padding: 5px 10px;
      border-radius: 10px;
      display: inline-block!important;
      max-width: 60%;
  }
</style>
